//使用redux创建store === 仓库 === 容器
import { createStore,applyMiddleware } from 'redux'
import logger from 'redux-logger'
import { thunk } from 'redux-thunk'
/* 
redux-looger：打印日志
redux-thunk：处理异步 允许action是个函数
使用中间件:applyMiddleware
*/

/* 
redux是个可预测的状态的管理器 可以在任意的单页面应用使用
redux包含3部分  || redux三大组成部分
1.store容器  管理状态容器
2.reducer函数 修改状态 返回新状态
3.action对象 描述如何修改状态的一个对象

redux三大使用原则?
1.唯一数据源 只有一个store容器
2.state(状态)是只读的 (在组件中不能直接修改状态,reducer也不能直接修改原状态)
3.使用纯函数修改状态

reducer为什么是个纯函数
react检查 redux返回的结果新状态 和 原状态 是否是 一个堆内存地址
如果是相同的一个地址(相同的对象) 没有发生变化 不去重新渲染视图

纯函数的概念||特点
1.有确定的输入 有确定的输出(一个函数执行的结果 取决于形参) 结果错了 先检查参数
2.没有副作用操作

副作用操作有哪些? 调取异步方法 创建时间 本地缓存 控制台输出 随机数据 修改一个函数的外部的变量(形参)


*/


//创建要管理的 状态 === 公共的数据
let initState = {
    todolist: []
}

//2.创建reducer纯函数 修改状态 返回新状态
//2个形参：oldState原状态，action对象(动作对象) ：type唯一值,payload?组件给的参数
function reducer(oldstate, action) {
    //console.log(action);
    //深拷贝数据 不能修改原状态
    let newlist = JSON.parse(JSON.stringify(oldstate))

    //reudcer根据action的描述修改状态
    let { type, payload } = action
    
    if(type=='get_list'){ //获取异步数据 存到redux中 payload=[]
        newlist.todolist = payload
    }

    //添加 payload = obj
    if (type == 'add_list') {
        newlist.todolist.push(payload)
    }

    //console.log(newlist);

    //删除 payload = id
    if (type == 'del_list') {
        newlist.todolist = newlist.todolist.filter(item => {
            return item.id !== payload
        })
    }




    return newlist //必须有返回 否则组件获取不到状态
}

//1.使用createStore方法执行,创建一个store容器(store实例)
/* 
3个参数:reducer函数 管理的状态(初始状态),中间件

什么是中间件:使用第三方插件
在执行dispatch发送action对象【payload:异步数据】 通知reducer修改状态 过程中进行拦截

组件中执行dispatch 使用中间件 先去执行异步 得到异步数据
再去执行一个dispatch 发送action对象{type,payload:异步数据}
通知reducer去根据异步数据修改状态
*/


let store = createStore(reducer, initState,applyMiddleware(logger,thunk))



export default store